<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    .chat {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .chat li {
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px dotted #B3A9A9;
    }


    .panel-body {
        overflow-y: scroll;
        height: 80%;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }
</style>
<script type="text/javascript">
    function sendMessage(){
            text = $('#btn-input').val()
            $('#btn-input').val('')
            addChat(text, true)

            $.ajax({
               headers: {
                    Accept : "application/json",
                    "Content-Type": "text/plain"
                },
                type: "POST",
                url: "/api",
                data : {'text' : text, 'plain_text' : 'true'},
                success: function(data) {
                    reply = data['reply']
                    addChat(reply, false)
                }
            });


    }
    function addChat(message, sent) {
     console.log('message :' + message + ', sent :' + sent)
     $('#chatThread').prepend(
        $('<li>')
            .addClass(sent ? 'right' : 'left')
            .addClass('clearfix')
            .append(
                $('<span>').addClass('chat-img').addClass('pull-left')
                .append(
                    $('<img>').addClass('img-circle').attr('src', sent ? 'http://placehold.it/36/FA6F57/fff&text=ME' :'http://placehold.it/36/55C1E7/fff&text=A' )
                    ))
            .append(
                $('<div>')
                    .addClass('chat-body').addClass('clearfix')
                    .append(
                        $('<div>').addClass('header')
                        .append(
                            $('<strong>').addClass('primary-font').text(sent ? 'You' : 'Alice')))
                    .append(
                            $('<p>').text( message))))

    //need to scroll to the last one
    $('body').scrollTop($('ul li').last().position().top + $('ul li').last().height());
    }

</script>
<body class="body">
<div>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-comment"></span> ALICE
                    </div>
                    <div class="panel-input">
                        <div class="input-group">
                            <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                        <span class="input-group-btn">
                            <button class="btn btn-warning btn-sm" id="btn-chat" onclick="sendMessage()"> Send</button>
                        </span>
                        </div>
                    </div>
                    <div class="panel-body">
                        <ul id='chatThread' class="chat">
                            <!-- Chats will come here-->
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <script>
        $('#btn-input').keyup(function(e){
            if(e.keyCode == 13){
                sendMessage();
            }
        });
        addChat('Hello, ', false)
    </script>

</div>
</body>
</html>
